<template>
  <div class="group-tour-detail-page">
    <div class="main-image-section">
      <img :src="groupTourImages[currentImageIndex]" alt="Group Tour Image" class="main-tour-image">
      <div class="carousel-controls">
        <button class="carousel-button prev" @click="prevImage">&lt;</button>
        <button class="carousel-button next" @click="nextImage">&gt;</button>
      </div>
      <div class="carousel-indicators">
        <span v-for="(image, index) in groupTourImages" :key="index" :class="{'active': index === currentImageIndex}" @click="currentImageIndex = index"></span>
      </div>
      <div class="tour-header-info">
        <h1 class="tour-title">{{ tourDetails.title }}</h1>
        <p class="tour-description">{{ tourDetails.description }}</p>
        <div class="actions">
          <el-button class="action-btn" @click="toggleFavorite">
            <i :class="isFavorited ? 'el-icon-collection' : 'el-icon-star-off'"></i>
            {{ isFavorited ? '已收藏' : '收藏' }}
          </el-button>
        </div>
      </div>
    </div>

    <div class="content-wrapper">
      <!-- 主要信息区域 -->
      <div class="tour-overview">
        <div class="tour-main-info">
          <div class="agency-section">
            <div class="agency-header" @click="goToAgencyDetail(id)" style="cursor:pointer">
              <div class="agency-avatar-wrapper">
                <img :src="tourDetails.agency.avatar || 'https://via.placeholder.com/60x60?text=Agency'" alt="Agency Avatar" class="agency-avatar">
              </div>
              <div class="agency-info">
                <h3>{{ tourDetails.agency.name }}</h3>
                <p class="agency-subtitle">专业旅行社</p>
              </div>
            </div>
          </div>

          <div class="price-section">
            <div class="price-info">
              <span class="price-label">价格</span>
              <span class="price-value">{{ tourDetails.price }}</span>
              <span class="price-unit">/ 人</span>
            </div>
            <div class="status-info">
              <span class="status-badge" :class="getStatusClass(tourDetails.progressStatus)">
                {{ tourDetails.progressStatus }}
              </span>
            </div>
          </div>
        </div>

        <div class="tour-action-section">
          <el-tooltip 
            :content="getStatusTooltip(tourDetails.progressStatus)" 
            placement="top" 
            :disabled="tourDetails.progressStatus === '报名中'"
          >
            <el-button 
              type="primary" 
              size="large" 
              class="signup-button" 
              @click="registerForTour"
              :disabled="tourDetails.progressStatus !== '报名中'"
            >
              <i class="el-icon-plus"></i>
              {{ tourDetails.progressStatus === '报名中' ? '立即报名' : '无法报名' }}
            </el-button>
          </el-tooltip>
        </div>
      </div>

      <!-- 详细信息区域 -->
      <section class="tour-details-section">
        <h2 class="section-title">
          <i class="el-icon-info"></i>
          跟团游详情
        </h2>
        
        <div class="details-grid">
          <div class="detail-card">
            <div class="detail-item">
              <div class="detail-icon">
                <i class="el-icon-location"></i>
              </div>
              <div class="detail-content">
                <span class="detail-label">目的地</span>
                <span class="detail-value">{{ tourDetails.scenicName }}</span>
              </div>
            </div>
          </div>

          <div class="detail-card">
            <div class="detail-item">
              <div class="detail-icon">
                <i class="el-icon-date"></i>
              </div>
              <div class="detail-content">
                <span class="detail-label">出行时间</span>
                <span class="detail-value">{{ tourDetails.time }}</span>
              </div>
            </div>
          </div>

          <div class="detail-card">
            <div class="detail-item">
              <div class="detail-icon">
                <i class="el-icon-user"></i>
              </div>
              <div class="detail-content">
                <span class="detail-label">招募人数</span>
                <span class="detail-value">{{ tourDetails.recruitmentNumber }}人</span>
              </div>
            </div>
          </div>

          <div class="detail-card">
            <div class="detail-item">
              <div class="detail-icon">
                <i class="el-icon-check"></i>
              </div>
              <div class="detail-content">
                <span class="detail-label">已报名</span>
                <span class="detail-value">{{ tourDetails.registeredNumber }}人</span>
              </div>
            </div>
          </div>

          <div class="detail-card">
            <div class="detail-item">
              <div class="detail-icon">
                <i class="el-icon-map-location"></i>
              </div>
              <div class="detail-content">
                <span class="detail-label">集合地点</span>
                <span class="detail-value">{{ tourDetails.assemblyPlace }}</span>
              </div>
            </div>
          </div>

          <div class="detail-card">
            <div class="detail-item">
              <div class="detail-icon">
                <i class="el-icon-phone"></i>
              </div>
              <div class="detail-content">
                <span class="detail-label">领队联系方式</span>
                <span class="detail-value">{{ tourDetails.contact }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <el-dialog v-model="showPaymentModal" title="扫码支付" width="30%" center @close="closePaymentModal">
      <div class="payment-modal-content" v-if="!paymentSuccessful">
        <p>请扫描下方二维码完成支付</p>
        <img src="http://localhost:8080/grouptour/image/code.jpg" alt="Payment QR Code" class="qr-code-image">
        <el-button type="success" @click="simulatePaymentSuccess" class="simulate-payment-button">模拟支付成功</el-button>
      </div>
      <div class="payment-success-content" v-else>
        <i class="el-icon-circle-check"></i>
        <p>恭喜您，支付成功！</p>
      </div>
    </el-dialog>

    <el-dialog v-model="showUserInfoModal" title="填写报名信息" width="40%" center @close="closeUserInfoModal">
      <div class="user-info-form-content">
        <div class="form-item">
          <label>跟团游名称:</label>
          <span>{{ tourDetails.title }}</span>
        </div>
        <div class="form-item">
          <label>价格:</label>
          <span>{{ tourDetails.price }}</span>
        </div>
        <div class="form-item">
          <label>报名时间:</label>
          <span>{{ currentDateTime }}</span>
        </div>

        <div class="form-item">
          <label for="userName">姓名:</label>
          <el-input id="userName" v-model="formUserName" placeholder="请输入您的姓名"></el-input>
        </div>
        <div class="form-item">
          <label for="contactPhone">联系电话:</label>
          <el-input id="contactPhone" v-model="formUserPhone" placeholder="请输入联系电话"></el-input>
        </div>
        <div class="form-item">
          <label>性别:</label>
          <el-radio-group v-model="formUserGender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </div>
        <div class="form-actions">
          <el-button @click="closeUserInfoModal">取消</el-button>
          <el-button type="primary" @click="confirmRegistrationInfo">确认报名</el-button>
        </div>
        <p class="form-note">注意：报名成功后请自行与旅行社联系!</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage, ElDialog, ElInput, ElRadioGroup, ElRadio, ElButton, ElTooltip } from 'element-plus';
import { mapGetters } from 'vuex';

export default {
  name: 'GroupTourDetailPage',
  props: ['id'],
  components: {
    ElInput,
    ElRadioGroup,
    ElRadio,
    ElButton,
    ElDialog,
    ElTooltip
  },
  data() {
    return {
      tourDetails: {
        id: null,
        title: '加载中...',
        description: '加载中...',
        mainImage: 'https://via.placeholder.com/1200x400?text=Loading...',
        agency: {
          name: '加载中...',
          avatar: ''
        },
        scenicName: '加载中...',
        time: '加载中...',
        recruitmentNumber: '加载中...',
        registeredNumber: '加载中...',
        price: '加载中...',
        assemblyPlace: '加载中...',
        contact: '加载中...',
        progressStatus: '加载中...'
      },
      currentImageIndex: 0,
      groupTourImages: [],
      showPaymentModal: false,
      paymentSuccessful: false,
      showUserInfoModal: false,
      formUserName: '',
      formUserPhone: '',
      formUserGender: 1,
      currentUser: null,
      currentDateTime: '',
      insertedRegistrationId: null,
      isFavorited: false
    };
  },
  computed: {
    ...mapGetters(['isAuthenticated'])
  },
  methods: {
    getStatusClass(status) {
      const statusMap = {
        '未开始': 'status-upcoming',
        '报名中': 'status-recruiting',
        '报名截止': 'status-closed',
        '进行中': 'status-ongoing',
        '已结束': 'status-ended'
      };
      return statusMap[status] || 'status-default';
    },

    getStatusTooltip(status) {
      const statusMap = {
        '未开始': '跟团游尚未开始报名',
        '报名中': '可以报名',
        '报名截止': '报名已截止',
        '进行中': '跟团游已开始',
        '已结束': '跟团游已结束'
      };
      return statusMap[status] || '当前状态无法报名';
    },

    generateSixDigitRandom() {
      return Math.floor(100000 + Math.random() * 900000);
    },

    async fetchTourDetails() {
      try {
        const response = await axios.get(`http://localhost:8080/mw/GroupTourById?id=${this.id}`);
        const data = response.data;

        this.tourDetails = {
          id: data.groupTourID || this.id,
          title: data.groupTourName || '未知跟团游',
          description: data.groupTourIntroduction || '暂无介绍',
          agency: {
            name: data.travelAgencyName || '未知旅行社',
            avatar: data.travelAgencyAvatar || ''
          },
          scenicName: data.scenicAreaName || '未知景点',
          time: `${data.startDate || '未知'} - ${data.endDate || '未知'}`,
          recruitmentNumber: data.recruitmentNumber || '未知',
          registeredNumber: data.registrationCount || '未知',
          price: data.groupTourPrice || '未知',
          assemblyPlace: data.assemblyPlace || '未知',
          contact: data.principalPhone || '未知',
          progressStatus: data.progressStatus || '未知'
        };

        if (data.groupTourImageLinks && data.groupTourImageLinks.length > 0) {
          this.groupTourImages = data.groupTourImageLinks;
        } else {
          this.groupTourImages = ['https://via.placeholder.com/1200x400?text=No+Image'];
        }
        this.currentImageIndex = 0;
        this.tourDetails.mainImage = this.groupTourImages[0];

      } catch (error) {
        console.error('Error fetching tour details:', error);
        this.tourDetails = {
          id: this.id,
          title: '加载失败',
          description: '未能加载跟团游详细信息。请稍后再试。',
          mainImage: 'https://via.placeholder.com/1200x400?text=Error',
          agency: { name: 'N/A', avatar: '' },
          scenicName: 'N/A',
          time: 'N/A',
          recruitmentNumber: 'N/A',
          registeredNumber: 'N/A',
          price: 'N/A',
          assemblyPlace: 'N/A',
          contact: 'N/A',
          progressStatus: '未知',
        };
        this.groupTourImages = ['https://via.placeholder.com/1200x400?text=Error'];
      }
    },

    async fetchCurrentUser() {
      try {
        const loginId = localStorage.getItem('loginId');
        if (!loginId) {
          ElMessage.warning('请先登录');
          return null;
        }

        const response = await axios.get(`http://localhost:8080/mw/UserByLoginId?loginId=${loginId}`);
        return response.data;
      } catch (error) {
        console.error('获取用户信息失败:', error);
        ElMessage.error('获取用户信息失败');
        return null;
      }
    },

    prevImage() {
      this.currentImageIndex = (this.currentImageIndex - 1 + this.groupTourImages.length) % this.groupTourImages.length;
    },

    nextImage() {
      this.currentImageIndex = (this.currentImageIndex + 1) % this.groupTourImages.length;
    },

    async registerForTour() {
      const loginId = localStorage.getItem('loginId');
      if (!loginId) {
        ElMessage.warning('请先登录才能报名跟团游。');
        this.$router.push('/login');
        return;
      }

      // Check if tour is in "报名中" status
      if (this.tourDetails.progressStatus !== '报名中') {
        ElMessage.warning(`当前跟团游状态为${this.tourDetails.progressStatus}，无法报名`);
        return;
      }

      this.currentUser = await this.fetchCurrentUser();
      if (!this.currentUser) return;

      try {
        const checkResponse = await axios.get('http://localhost:8080/gtr/check-duplicate', {
          params: {
            userId: this.currentUser.userId,
            groupTourId: this.tourDetails.id
          }
        });

        if (checkResponse.data) {
          ElMessage.warning('您已报名该旅游团，无需重复报名！');
          return;
        }
      } catch (error) {
        console.error('检查报名状态失败:', error);
      }

      const registered = parseInt(this.tourDetails.registeredNumber);
      const recruitment = parseInt(this.tourDetails.recruitmentNumber);
      if (registered >= recruitment) {
        ElMessage.warning('抱歉，该跟团游的报名人数已满。');
        return;
      }

      this.openUserInfoModal();
    },

    goToAgencyDetail(id) {
      this.$router.push(`/homepage/agencydetail/${id}`);
    },

    openUserInfoModal() {
      this.showUserInfoModal = true;
      const now = new Date();
      this.currentDateTime = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
      
      if (this.currentUser) {
        this.formUserPhone = this.currentUser.contactPhone || '';
        this.formUserGender = this.currentUser.gender !== undefined ? 
                          parseInt(this.currentUser.gender) : 1;
      }
      this.formUserName = '';
    },

    closeUserInfoModal() {
      this.showUserInfoModal = false;
    },

    async confirmRegistrationInfo() {
      if (!this.formUserName) {
        ElMessage.warning('请填写姓名。');
        return;
      }

      if (!this.formUserPhone) {
        ElMessage.warning('请填写联系电话。');
        return;
      }

      // Double check status before submitting
      if (this.tourDetails.progressStatus !== '报名中') {
        ElMessage.warning(`当前跟团游状态为${this.tourDetails.progressStatus}，无法报名`);
        this.closeUserInfoModal();
        return;
      }

      const registered = parseInt(this.tourDetails.registeredNumber);
      const recruitment = parseInt(this.tourDetails.recruitmentNumber);
      if (registered >= recruitment) {
        ElMessage.warning('抱歉，该跟团游的报名人数已满。');
        this.closeUserInfoModal();
        return;
      }

      console.log('Tour ID:', this.tourDetails.id);
      console.log('User ID:', this.currentUser?.userId);

      if (!this.tourDetails.id) {
        ElMessage.error('无效的跟团游ID');
        return;
      }

      try {
        const checkResponse = await axios.get('http://localhost:8080/gtr/check-duplicate', {
          params: {
            userId: this.currentUser.userId,
            groupTourId: this.tourDetails.id
          }
        });

        if (checkResponse.data) {
          ElMessage.warning('您已报名该旅游团，无需重复报名！');
          this.closeUserInfoModal();
          return;
        }

        let transactionAmount;
        if (typeof this.tourDetails.price === 'string') {
          transactionAmount = parseFloat(this.tourDetails.price.replace(/[^\d.]/g, ''));
        } else if (typeof this.tourDetails.price === 'number') {
          transactionAmount = this.tourDetails.price;
        } else {
          transactionAmount = 0;
          console.warn('无法识别的价格格式:', this.tourDetails.price);
        }

        if (isNaN(transactionAmount)) {
          ElMessage.error('价格格式不正确');
          return;
        }

        const registrationId = this.generateSixDigitRandom();

        const payload = {
          registrationID: registrationId,
          groupTourID: this.tourDetails.id,
          userID: this.currentUser.userId,
          userName: this.formUserName,
          userGender: this.formUserGender.toString(),
          userPhone: this.formUserPhone,
          transactionAmount: transactionAmount
        };

        console.log('Sending payload:', payload);

        const response = await axios.post('http://localhost:8080/gtr/insert', payload);
        
        if (response.data > 0) {
          this.insertedRegistrationId = response.data;
          ElMessage.success('报名信息已提交，请完成支付！');
          this.closeUserInfoModal();
          this.openPaymentModal();
        } else {
          ElMessage.error('报名失败，请稍后再试。');
        }
      } catch (error) {
        console.error('报名失败:', error);
        ElMessage.error(`报名失败: ${error.response?.data?.message || error.message}`);
      }
    },

    openPaymentModal() {
      this.showPaymentModal = true;
      this.paymentSuccessful = false;
    },

    closePaymentModal() {
      if (!this.paymentSuccessful && this.insertedRegistrationId) {
        this.deleteRegistration();
      }
      this.showPaymentModal = false;
      this.paymentSuccessful = false;
    },

    async deleteRegistration() {
      try {
        await axios.delete(`http://localhost:8080/gtr/delete?registrationId=${this.insertedRegistrationId}`);
        ElMessage.warning('已取消支付，报名信息已删除');
        this.insertedRegistrationId = null;
        this.fetchTourDetails();
      } catch (error) {
        console.error('删除报名记录失败:', error);
        ElMessage.error('删除报名记录失败');
      }
    },

    simulatePaymentSuccess() {
      this.paymentSuccessful = true;
      ElMessage.success('恭喜您，支付成功！');
      setTimeout(() => {
        this.closePaymentModal();
        this.fetchTourDetails();
        this.insertedRegistrationId = null;
      }, 1500);
    },

    async checkGroupTourFavoriteStatus() {
      if (!this.currentUser || !this.tourDetails.id) {
        this.isFavorited = false;
        return;
      }
      try {
        const response = await axios.get('http://localhost:8080/mw/checkFavorite', {
          params: {
            userId: this.currentUser.userId,
            groupTourId: this.tourDetails.id
          }
        });
        this.isFavorited = response.data;
      } catch (error) {
        console.error('检查收藏状态失败:', error);
        this.isFavorited = false;
      }
    },

    async toggleFavorite() {
      const loginId = localStorage.getItem('loginId');
      if (!loginId) {
        ElMessage.warning('请先登录才能收藏跟团游。');
        this.$router.push('/login');
        return;
      }

      if (!this.currentUser) {
        this.currentUser = await this.fetchCurrentUser();
        if (!this.currentUser) {
          ElMessage.warning('获取用户信息失败，请重新登录。');
          this.$router.push('/login');
          return;
        }
      }

      const userId = this.currentUser.userId;
      const groupTourId = this.tourDetails.id;

      if (!userId || !groupTourId) {
        ElMessage.error('无法获取用户或跟团游信息，请刷新页面重试。');
        return;
      }

      try {
        if (this.isFavorited) {
          const response = await axios.delete('http://localhost:8080/mw/deleteByUserAndGroupTour', {
            params: {
              userId: userId,
              groupTourId: groupTourId
            }
          });
          if (response.data > 0) {
            this.isFavorited = false;
            ElMessage.success('已取消收藏');
          } else {
            ElMessage.error('取消收藏失败');
          }
        } else {
          const payload = {
            userId: userId,
            groupTourId: groupTourId,
            favoriteTime: new Date().toISOString()
          };
          const response = await axios.post('http://localhost:8080/mw/addGroupTourFavorite', payload);
          if (response.data > 0) {
            this.isFavorited = true;
            ElMessage.success('收藏成功');
          } else {
            ElMessage.error('收藏失败');
          }
        }
      } catch (error) {
        console.error('收藏操作失败:', error);
        ElMessage.error(`操作失败: ${error.response?.data?.message || error.message}`);
      }
    }
  },
  watch: {
    id: {
      handler(newId) {
        if (newId) {
          this.fetchTourDetails();
        }
      },
      immediate: true
    }
  },
  async mounted() {
    await this.fetchTourDetails();
    if (localStorage.getItem('loginId')) {
      this.currentUser = await this.fetchCurrentUser();
      if (this.currentUser) {
        await this.checkGroupTourFavoriteStatus();
      }
    }
  }
};
</script>

<style scoped>
.group-tour-detail-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding-bottom: 40px;
}
.group-tour-detail-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background:
    linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(107, 91, 149, 0.8)),
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover;
  z-index: 0;
  pointer-events: none;
}
.group-tour-detail-page > * {
  position: relative;
  z-index: 1;
}
.main-image-section {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80px; /* 新增：根据表头高度调整，可调大或调小 */
}

.main-tour-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 10;
  padding: 0 20px;
}

.carousel-button {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border: none;
  padding: 12px 18px;
  cursor: pointer;
  font-size: 1.5em;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.carousel-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.carousel-indicators span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-indicators span.active {
  background-color: #fff;
  transform: scale(1.2);
}

.tour-header-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
  padding: 50px 80px 30px 80px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tour-title {
  font-size: 3.5em;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.tour-description {
  font-size: 1.3em;
  margin-bottom: 25px;
  line-height: 1.6;
  opacity: 0.9;
}

.actions .el-button {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 12px 24px;
  font-size: 1.1em;
  border-radius: 30px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.actions .el-button:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.actions .el-button i {
  margin-right: 8px;
}

.content-wrapper {
  width: 85vw;
  max-width: 1200px;
  margin: 30px auto 0 auto; /* 原为 margin: -50px auto 0 auto; */
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  padding: 40px;
  position: relative;
  z-index: 5;
}

.tour-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.tour-main-info {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
}

.agency-section {
  flex-shrink: 0;
}

.agency-header {
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
}

.agency-header:hover {
  transform: translateY(-2px);
}

.agency-avatar-wrapper {
  position: relative;
}

.agency-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.agency-avatar:hover {
  transform: scale(1.05);
}

.agency-info h3 {
  font-size: 1.4em;
  font-weight: 600;
  color: #333;
  margin: 0 0 5px 0;
}

.agency-subtitle {
  color: #666;
  font-size: 0.9em;
  margin: 0;
}

.price-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.price-label {
  font-size: 0.9em;
  color: #666;
}

.price-value {
  font-size: 2.5em;
  font-weight: 700;
  color: #e74c3c;
}

.price-unit {
  font-size: 1em;
  color: #666;
}

.status-badge {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: 600;
  text-align: center;
}

.status-recruiting {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: white;
}

.status-full {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.status-ended {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  color: white;
}

.status-ongoing {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.tour-action-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-button {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  border: none;
  padding: 15px 35px;
  font-size: 1.2em;
  font-weight: 600;
  border-radius: 50px;
  color: white;
  box-shadow: 0 8px 25px rgba(238, 90, 82, 0.3);
  transition: all 0.3s ease;
  min-width: 160px;
}

.signup-button:hover {
  background: linear-gradient(135deg, #ee5a52, #ff6b6b);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(238, 90, 82, 0.4);
}

.signup-button i {
  margin-right: 8px;
}

.tour-details-section {
  margin-top: 40px;
  padding: 30px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.section-title {
  font-size: 1.8em;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 3px solid #667eea;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 2px;
}

.section-title i {
  font-size: 1.2em;
  color: #667eea;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 25px;
}

.detail-card {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-radius: 12px;
  padding: 25px;
  border: 1px solid rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.detail-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.detail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
  background: linear-gradient(135deg, #f0f2ff 0%, #e8ebff 100%);
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 18px;
}

.detail-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.detail-icon i {
  font-size: 1.2em;
  color: white;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.detail-label {
  font-size: 0.9em;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-value {
  font-size: 1.1em;
  color: #333;
  font-weight: 600;
  line-height: 1.4;
}

/* 对话框样式 */
.el-dialog {
  border-radius: 15px;
  overflow: hidden;
}

.el-dialog__header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 20px 30px;
}

.el-dialog__title {
  font-size: 1.3em;
  font-weight: 600;
}

.el-dialog__body {
  padding: 30px;
}

.payment-modal-content,
.payment-success-content {
  text-align: center;
  padding: 20px;
}

.payment-modal-content p,
.payment-success-content p {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 20px;
}

.qr-code-image {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.simulate-payment-button {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  border: none;
  color: white;
  padding: 12px 25px;
  border-radius: 25px;
  font-weight: 600;
  margin-top: 15px;
}

.payment-success-content i {
  font-size: 4em;
  color: #27ae60;
  margin-bottom: 15px;
}

.user-info-form-content {
  padding: 10px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
}

.form-item label {
  min-width: 100px;
  font-weight: 600;
  color: #333;
  text-align: right;
}

.form-item span {
  color: #666;
  font-size: 1em;
}

.el-input {
  flex: 1;
}

.el-radio-group {
  flex: 1;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.form-actions .el-button {
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 600;
}

.form-note {
  text-align: center;
  color: #e74c3c;
  font-size: 0.9em;
  margin-top: 15px;
  padding: 10px;
  background: rgba(231, 76, 60, 0.1);
  border-radius: 8px;
  border-left: 4px solid #e74c3c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tour-header-info {
    padding: 30px 20px 20px 20px;
  }
  
  .tour-title {
    font-size: 2.5em;
  }
  
  .tour-description {
    font-size: 1.1em;
  }
  
  .content-wrapper {
    width: 95vw;
    padding: 20px;
    margin-top: 20px; /* 原为 margin-top: -30px; */
  }
  
  .tour-overview {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }
  
  .tour-main-info {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  
  .details-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .detail-card {
    padding: 20px;
  }
  
  .carousel-controls {
    padding: 0 10px;
  }
  
  .carousel-button {
    padding: 10px 15px;
    font-size: 1.2em;
  }
}

@media (max-width: 480px) {
  .main-image-section {
    height: 300px;
  }
  
  .tour-title {
    font-size: 2em;
  }
  
  .tour-description {
    font-size: 1em;
  }
  
  .price-value {
    font-size: 2em;
  }
  
  .detail-item {
    gap: 12px;
  }
  
  .detail-icon {
    width: 40px;
    height: 40px;
  }
  
  .detail-icon i {
    font-size: 1em;
  }
}
</style>